Text 文本 |
您所在的位置：网站首页 › mode phone › Text 文本 |
| # Text 文本 ✈ 组件名：uv-text 点击下载&安装 (opens new window) 此组件集成了文本类在项目中的常用功能，包括状态，拨打电话，格式化日期，*替换，超链接...等功能。 您大可不必在使用特殊文本时自己定义，text组件涵盖您能使用的大部分场景。 # 平台兼容性 App（vue） App（nvue） H5 小程序 VUE2 VUE3 √ √ √ √ √ √ # 基本使用 通过text参数设置文本内容。推荐您使用:text='value'的形式 # 设置主题通过type参数设置文本主题，我们提供了五类属性：primary error success warning info。 # 拨打电话通过将mode属性设置为phone即可调用拨打电话，提供加密值format="encrypt"电话号码中间脱敏 # 日期格式化通过将mode属性设置为date # 姓名脱敏通过将mode属性设置为name，同时设置 format="encrypt"属性 # 超链接通过将mode属性设置为link，同时设置href指定链接地址 # 显示金额通过将mode属性设置为price # 前后图标添加prefixIcon,suffixIcon指定图标和位置，iconStyle设置图标大小 # 超出隐藏内置了文字超出隐藏样式，设置lines属性表明几行后隐藏 # 小程序开放能力针对小程序开放能力，我们提供了分享，请在小程序环境下使用 注意：使用uni上挂载的uv-ui内置方法，需要根据扩展配置 - JS工具库进行相应的配置，否则直接会报错！ export default { onLoad() {}, methods: { clickHandler() { // #ifndef MP-WEIXIN uni.showToast({ icon: 'none', title: '请在微信小程序内查看效果' }) // #endif } }, } # 完整示例完整示例下载地址 https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window) # API # Text Props 参数 说明 类型 默认值 可选值 text 显示的值 String | Number - - type 主题颜色 String - - show 是否显示 Boolean true true | false prefixIcon 前置图标 String - - suffixIcon 后置图标 String - - mode 文本处理的匹配模式text-普通文本，price - 价格，phone - 手机号，name - 姓名，date - 日期，link - 超链接 String - href mode=link下，配置的链接 String - - format 格式化规则 String | Function - - call mode=phone时，点击文本是否拨打电话 Boolean false true | false openType 小程序的打开方式 String - - bold 是否粗体，默认normal Boolean false true | false block 是否块状 ，仅vue生效 Boolean false true | false lines 文本显示的行数，如果设置，超出此行数，将会显示省略号。最大值为5。 String | Number - - color 文本颜色 String #303133 - size 字体大小 String | Number 15 - iconStyle 图标的样式 Object | String 15px - decoration 文字装饰，下划线，中划线等 String none none | underline | line-through margin 外边距，对象、字符串，数值形式均可 Object | Number | String - - lineHeight 文本行高 Number | String - - align 文本对齐方式 String left left | center | right wordWrap 文字换行 String normal normal | break-word | anywhere customStyle 自定义样式，eg：:custom-style="{color:'red',width:'20px'}" Object - - # Text Events 事件名 说明 回调参数 @click 点击触发事件 -← Button 按钮 Link 超链接 → 感谢支持我们 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |